<template>
	<view class="recommend_content">
		<view v-show="isEmpty">
			<EmptyView v-on:emptyClick="emptyClick" />
		</view>
		<scroll-view v-show="isEmpty === false" scroll-y="true" class="recommend_content" refresher-enabled="true"
		 :refresher-triggered="triggered" :refresher-threshold="100" @refresherpulling="onPulling" @refresherrefresh="onRefresh"
		 @refresherrestore="onRestore" @refresherabort="onAbort">
			<view class="recommend_list">
				<view @click.stop="toPersionHomeAction(item)" v-for="(item, index) in recommendList.forOther" :key="index" class="card">
					
					<view class="top-card">
						<view class="tip">{{'缘分值：' + (item.value || 50) }}</view>
						<view class="avatar-and-info">
							<view class="avatar-box">
								<image :src="item.avatar || 'http://static.kuaimayoupin.com/5814340611455953.png' " mode="aspectFill"></image>
							</view>
							<view class="info-box">
								<view class="per">
									<text class="name">{{ item.nick_name || "匿名" }}</text>
									<text class="vip" v-if="showVip(item.vip)">{{ getVipText(item.vip) }}</text>
									<text v-if="item.certificated" class="real">实名</text>
								</view>
								<view class="info">
									<text class="identity">{{ getText(item.job) }}</text>
									<text class="info-line">|</text>
									<text class="height">{{ getHeightText(item.height)}}</text>
									<text class="info-line">|</text>
									<text class="educational">{{ getText(item.education) }}</text>
									<text class="info-line">|</text>
									<text class="isMarried">{{ getText(item.marital_status)}}</text>
								</view>
							</view>
						</view>
						<view v-if="checkSoliloquy(item.soliloquy)" class="des-soliloquy">
							{{ item.soliloquy || "" }}
						</view>
						
					</view>
					<view class="btns">
						<view @click.stop="knowAction(item)" class="btn yes">
							了解TA1（ 5
							<image src="../../../static/images/detail/flower_1.png" mode=""></image>
							）
						</view>
						<view @click.stop="heartMessageAction(item)" class="btn no">
							心动留言（ 1
							<image src="../../../static/images/detail/flower_2.png" mode=""></image>
							）
						</view>
					</view>
				</view>
			</view>

			<view class="bottom"></view>
		</scroll-view>
	</view>

</template>

<script>
	import {
		EventBus
	} from '@/util/event-bus.js'
	import {
		recommendUsers,
		getGiftsList
	} from '@/api/home/home.js';
	import EmptyView from '@/pageA/empty/empty.vue'
	// import { followed } from '@/api/user/user.js';
	export default {
		components: {
			EmptyView
		},
		data() {
			return {
				loadingTop: 0,
				recommendList: [], // 推荐列表
				_freshing: false,
				triggered: false,
				gifts: [],
				isEmpty: false,
			};
		},
		watch: {

		},
		onBackPress() {
			console.log("onBackPress---------");
		},
		created() {
			let that = this;
			EventBus.$on('loginSuccess', function(res) {
				that.getRecommend()
			});
			EventBus.$on('recommendListRefresh', function(res) {
				that.getRecommend(true)
			});
			this.getGiftsListRequest()
		},
		mounted() {
			// this.getRecommend();
			this._freshing = false;
			this.triggered = true

		},
		methods: {
			onPulling(e) {},
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				this.getRecommend()
			},
			onRestore() {
				this.triggered = 'restore';
			},
			onAbort() {},
			getData() {},
			// 获取 推荐列表
			getRecommend(showLoading = false) {
				this.showLoading(showLoading);
				recommendUsers().then(res => {
					if (res.status == 1) {
						this.recommendList = res.data;
						console.log('------user/recommend--------', this.recommendList);
					}
					if (!showLoading) {
						this.triggered = false;
						this._freshing = false;
					}
					this.isEmpty = this.recommendList.length === 0
					this.showLoading(false);
				}, err => {
					if (!showLoading) {
						this.triggered = false;
						this._freshing = false;
					}

					this.isEmpty = true
					this.showLoading(false);
				});
			},
			getGiftsListRequest() {
				getGiftsList().then(res => {
					if (res.status == 1) {
						this.gifts = res.data;
						console.log('------gifts--------', this.gifts);
					}
				})
			},
			emptyClick() {
				this.getRecommend(true)
			},
			showLoading(show = true) {
				if (show) {
					uni.showLoading({
						title: ""
					})
				} else {
					uni.hideLoading()
				}
			},
			hellowAction(item) {
				console.log("hello")
				let giftsData = {}
				giftsData.gifts = this.gifts
				giftsData.userInfo = item
				this.$emit("showHello", giftsData)
			},
			/// 心动留言
			heartMessageAction(item) {
				if (this.isAuth() == false) {
					this.$emit("showAuth", {
						userName: item.nick_name,
						avatar: item.avatar
					})
					return
				}
				this.hellowAction(item)
			},
			/// 了解ta
			knowAction(item) {
				uni.showToast({
					title:'功能待开发',
					icon:'none'
				})
				// if (this.isAuth() == false) {
				// 	this.$emit("showAuth", {
				// 		userName: item.nick_name,
				// 		avatar: item.avatar
				// 	})
				// 	return
				// }
			},
			isAuth() {
				return getApp().globalData.userInfo.certificated || false
			},
			getText(str) {				
				let content = str || ""
				if (content == "" ) {
					return "保密";
				} else {
					return content;
				}
			},
			getHeightText(str) {
				let content = str || ""
				if (content == "" ) {
					return "保密";
				} else {
					return content + "cm" ;
				}
			},
			showVip(vip) {
				let vipStr = vip || ""
				if (vipStr == "-1" || vipStr == "") {
					return false
				} else {
					return true
				}
			},
			getVipText(str) {
				let vip = str || "VIP"
				return vip
			},
			hideAuthAction() {},
			toPersionHomeAction(item) {
				let userId = item.user_id ?? ""
				let url = '/pageA/homepage/homepage?user_id=' + userId;
				uni.navigateTo({
					url: url
				});
			},
			checkSoliloquy(str){
				let content = str || ""
				 if (content == "") {
					 return false
				 } else {
					 return true
				 }
				
			}
		},

	};
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}

	.recommend_content {
		height: 100%;
		width: 100%;
		background-color: #FFFFFF;

		.bottom {
			height: 35rpx;
			width: 100%;
		}

		.mnoticebar {
			width: 300rpx;
		}

		.recommend_list {
			.card {
				width: 670rpx;
				margin: 0 auto;
				margin-top: 20rpx;
				background: rgba(255, 255, 255, 1);

				.top-card {
					width: 670rpx;
					background: url("@/static/images/home/commond_card_bg.png") no-repeat;
					background-size: 100% 100%;
					position: relative;
					display: flex;
					flex-direction: column;
					padding: 30rpx 18rpx;
					.tip {
						text-align: center;
						width: 156rpx;
						height: 54rpx;
						background: #f9d05a;
						font-size: 26rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #474A58;
						line-height: 54rpx;
					}
					.des-soliloquy {
						margin: 18rpx 6rpx 0 6rpx;
						border-radius: 8rpx;
						padding: 20rpx 14rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #8389A0;
						line-height: 45rpx;
						background: #FFFFFF;
					}
					.avatar-and-info{
						display: flex;
						flex-direction: row;
						margin-top: 30rpx;
						.avatar-box {
							width: 180rpx;
							height: 208rpx;
							background: url("@/static/images/home/commond_avatar_bg.png") no-repeat;
							background-size: 100% 100%;
							display: flex;
							flex-direction: column;
							justify-content: flex-end;
							align-items: center;
							image{
								width: 152rpx;
								height: 152rpx;
								border-radius: 76rpx;
								margin-bottom: 16rpx;
								margin-right: 4rpx;
							}
						}
						.info-box {
							display: flex;
							flex-direction: column;
							justify-content: center;
							margin-top: 30rpx;
							margin-bottom: 8rpx;
							padding-top:0 8rpx;
							.per {
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: flex-start;
								.name {
									color: #474a58;
									font-size: 34rpx;
									font-weight: 500;
									margin-right: 10rpx;
								}
								.vip {
									margin-right: 10rpx;
									height: 36rpx;
									border-radius: 4rpx;
									border: 2rpx solid #ffaa37;
									padding: 0 10rpx;
									font-size: 26rpx;
									font-weight: 400;
									color: #FFAA37;
									line-height: 36rpx;
									background: #F4EDE4;
								}
								.real {
									font-size: 26rpx;
									color: #2d8eff;
									height: 36rpx;
									line-height: 36rpx;
									border-radius: 4rpx;
									border: 2rpx solid #2d8eff;
									padding: 0 10rpx;
									background-color: #E3E5F6;
								}
							}
							.info {
								margin-top: 20rpx;
								font-size: 26rpx;
								line-height: 36rpx;
								color: #8389a0;
								.info-line {
									text-align: center;
									line-height: 36rpx;
									padding: 0 10rpx;
								}
							}
						}
					}
				}

				.line {
					width: 622rpx;
					margin: 20rpx;
					border-bottom: 2rpx dashed #dfe1ec;
					background-color: #FFFFFF;
				}

				.btns {
					padding: 30rpx 0;
					display: flex;
					justify-content: space-between;
					.btn {
						width: 299rpx;
						height: 72rpx;
						border-radius: 4rpx;
						border: 2rpx solid #dfe1ec;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 30rpx;

						image {
							width: 26.8rpx;
							height: 31.2rpx;
							margin: 0 10rpx;
						}
					}

					.yes {
						background: #fff;
						color: #474a58;
					}

					.no {
						background: linear-gradient(135deg, #fc4f91 0%, #fd6ce6 100%);
						color: #fff;
					}
				}
			}
		}
	}
</style>
